﻿/**
 * @author liumulin
 */
//焦点图代码
  $(function(){
            
			   var Width=$("#focus_wrapper").width();  //获取焦点图宽度
			   var len=$("#focus_wrapper ul li").length;  //获取焦点图个数
			   var index=0;
			   //以下代码添加数字按钮和按钮后的半透明长条
			   var btn="<div class='btn'></div><div class='num'>";
			   for(var i=0;i<len;i++)
			   {
			   	  btn+="<span class='on'>"+(i+1)+"</span>";
			   }
			   btn+="</div>";
			   $("#focus_wrapper").append(btn);
			   $("#focus_wrapper .btn").css("opacity",0.5);
			   //为数字按钮添加鼠标滑入事件，以显示相应的内容
			   $("#focus_wrapper .num span").mouseenter(function(){
		              index = $("#focus_wrapper .num span").index(this);
		              showPics(index);
	           }).eq(0).trigger("mouseenter");
			   
			   //左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
			   $("#focus_wrapper ul").css("width",Width * (len));
			   $("#focus_wrapper li").each(function(){
				   $(this).css("width", Width);
			   });
			   
	            //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
	          $("#focus_wrapper").hover(function() {
		                   clearInterval(picTimer);
	                           },function() {
		                       picTimer = setInterval(function() {
			                   if(index == len) { //如果索引值等于li元素个数，说明最后一张图播放完毕，接下来要显示第一张图，即调用showFirPic()，然后将索引值清零
			                	   showPics(0);
				               index = 0;
			                   } else { //如果索引值不等于li元素个数，按普通状态切换，调用showPics()
				                  showPics(index);
			                   }
			                index++;
		              },6000); //自动播放的间隔，单位：毫秒
	          }).trigger("mouseleave");
	          
	          $("#focus_wrapper .btnprev").click(function(){
	        	   index -- ;
	        	  if(index == -1){
	        		 showPics(len-1);
	        		 index = len - 1;
	        	 }else{
	        		 showPics(index);
	        	 }
	          });
	          $("#focus_wrapper .btnnext").click(function(){
	        	     index ++ ;
		        	 if(index == len){
		        		 showPics(0);
		        		 index = 0;
		        	 }else{
		        		 showPics(index);
		        	 }
		          });
	          
	            //显示图片函数，根据接收的index值显示相应的内容
	           function showPics(index) { //普通切换
	           	  var nowLeft = -index*Width; //根据index值计算ul元素的left值
	           	  $("#focus_wrapper ul").stop(true,false).animate({"left":nowLeft},600); //通过animate()调整ul元素滚动到计算出的position
	           	  $("#focus_wrapper .num span").removeClass("on").eq(index).addClass("on"); //为当前的按钮切换到选中的效果
	            }
	            //最后一张图自动切换到第一张图时专用
	         function showFirPic() { 
		           $("#focus_wrapper ul").append($("#focus_wrapper ul li:first").clone());
		           var nowLeft = -len*Width; //通过li元素个数计算ul元素的left值，也就是最后一个li元素的右边
		           $("#focus_wrapper ul").stop(true,false).animate({"left":nowLeft},500,function() {
			        //通过callback，在动画结束后把ul元素重新定位到起点，然后删除最后一个复制过去的元素
			       $("#focus_wrapper ul").css("left","0");
			       $("#focus_wrapper ul li:last").remove();
		          }); 
		          $("#focus_wrapper .num span").removeClass("on").eq(0).addClass("on"); //为第一个按钮添加选中的效果
	          }
			 });